<template>
	<view class="voc">
		<image class="item-bgImg" src="../../static/1.jpg" mode=""></image>
		<view class="voc-spelling">
			<view class="spelling">{{vocDetail.spelling}}</view>
			<view class="phonetic_uk">{{vocDetail.phonetic_uk}}</view>
			<view class="count">
				{{words[key].count}}/4
			</view>
		</view>
		<voc-detail v-if="!isKnow" class="voc-detail" :vocDetail='vocDetail' :vocPhrase='vocPhrase'></voc-detail>
		<view class="voc-detail" v-else></view>
		<view class="voc-btn" v-if="isWatch">
			<voc-know class="btn" v-if="isKnow" @sonEven="nextVoc"></voc-know>
			<voc-not-know class="btn" v-else @sonEven="nextVoc"></voc-not-know>
		</view>
		<view class="voc-btn" v-else></view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				isWatch: 1,
				type: "",
				isKnow: 1,
				key: 0,
				learnCount: 0,
				learnedCount: 0,
				vocDetail: {},
				vocPhrase: [],
				words: [],
				learnedWords: []
			};
		},
		computed: {
			...mapState('user', ['reviewCount', 'nowReviewVoc'])
		},
		onLoad(options) {
			this.setVocCount(options)
		},
		methods: {
			...mapMutations('user', ['updateReviewCount', 'sliceReviewVoc']),
			// 加载单词数量
			setVocCount(options) {
				if (options.type === 'watch') {
					this.isWatch = 0
					this.getVocDetailByKeyword(options.keyword)
				} else {
					this.learnCount = this.reviewCount
					if (this.nowReviewVoc[0] != null) {
						this.words = this.nowReviewVoc

					} else {
						this.sliceReviewVoc()
						this.words = this.nowReviewVoc
					}
					this.getVocDetailById(this.words[this.key].id)
					this.getVocPhrase(this.words[this.key].id)
				}
			},
			// 通过id获取单词详情
			async getVocDetailById(id) {
				const {
					data: vocDetailData
				} = await uni.$http.get("/api/voc/detail?id=" + id);
				this.vocDetail = await vocDetailData.data[0]
			},
			// 通过关键字获取单词详情
			async getVocDetailByKeyword(keyword) {
				const {
					data: vocDetailData
				} = await uni.$http.get("/api/voc/detail?keyword=" + keyword);
				this.vocDetail = await vocDetailData.data[0]
			},
			// 下一词
			nextVoc(pram) {
				if (pram > 0) {
					// isKnow等于1说明认识，不等于1说明直接跳到下一个单词
					this.isKnow = 1
					if (pram === 1) {
						if (this.words[this.key].count >= 3) {
							this.learnedWords.push({
								id: this.words[this.key].id,
								difficulty: this.words[this.key].wrongCount
							})
							this.words.splice(this.key, 1)
							this.key--
							this.learnedCount++
							if (this.learnedCount === this.learnCount) {
								uni.navigateBack({
									success: () => {
										this.updateReviewCount(this.reviewCount - ths.learnedCount)
									}
								})
								return
							}
						} else {
							this.words[this.key].count++
						}
					}

					this.key++
					if (this.key >= this.learnCount - this.learnedCount)
						this.key = this.key % (this.learnCount - this.learnedCount)
					this.getVocDetailById(this.words[this.key].id)
					this.getVocPhrase(this.words[this.key].id)

				} else {
					this.isKnow = 0
					this.words[this.key].count = 0
					this.words[this.key].wrongCount++
					if (pram === -1)
						this.words[this.key].wrongCount++
				}
			},
			// 获取单词例句
			async getVocPhrase(id) {
				const {
					data: vocPhraseData
				} = await uni.$http.get("/api/voc/phrase?voc_id=" + id);
				this.vocPhrase = await vocPhraseData.data
			},
			
		}
	}
</script>

<style lang="scss">
	.voc {
		height: 100%;

		.item-bgImg {
			height: 100%;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.voc-spelling {
			display: flex;
			height: 50px;
			margin-left: 40px;
			margin-top: 70px;

			.spelling {
				font-size: 30px;
			}

			.phonetic_uk {
				margin-top: 15px;
				font-size: 15px;
			}

			.count {
				margin-top: 15px;
				margin-left: 10px;
				color: #5555ff;
			}
		}

		.voc-detail {
			height: 70vh;
			display: flex;
			margin-left: 30px;
		}

		.voc-btn {
			display: flex;
			justify-content: center;
			align-items: center;

			.btn {
				height: 100%;
			}
		}
	}
</style>
